<template>
  <div>
    <el-table
        :data="list"
        tooltip-effect="dark"
        @selection-change="handleSelection"
        style="width: 100%">
      <el-table-column
          label="序号"
          type="index"
          width="90"
      />
      <el-table-column
          v-for="(item,index) in settings"
          :key="item"
          :label="item"
          :prop="index"

      />

      <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center"
          header-align="center"
          v-if="needCtrl"

      >
        <template slot-scope="scope">
          <slot name="ctrl" :info="scope.row"/>
        </template>

      </el-table-column>

    </el-table>
    <el-pagination
        :current-page="currentPage"
        :page-size="currentPageSize"
        :page-sizes="[10, 50, 100, 500, 1000, 99999]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleGetBySizeOrderManage"
        @current-change="handleGetByNumOrderManage"
    />
  </div>
</template>

<script>
export default {
  name: "courseTable",
  props: {
    orderType: Number,
    needCtrl: Boolean,

  },
  data () {
    return {
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      list: [],
      multipleOrder: [],
    };
  },
  computed: {
    settings () {
      return {
        "refundapplicationDate": "日期",
        "volunteerName": "用户姓名",
        "goodsName": "购买物品",
        "orderNumber": "订单号",
        "refundReason": "申请退款原因",
        "orderAmount": "商品金额",
      };
    },
    isMultipleOrder () {
      return this.multipleOrder.length !== 0;
    },

  },
  mounted () {
    this.handleGetOrderByType();

  },
  methods: {
    handleGetBySizeOrderManage (size) {
      this.currentPageSize = size;
      this.handleGetOrderByType();

    },
    handleGetByNumOrderManage (num) {
      this.currentPage = num;
      this.handleGetOrderByType();
    },

    async handleGetOrderByType () {
      let {
        currentPage,
        currentPageSize,
        orderType,
      } = this;

      let params = {
        pageNum: currentPage,
        pageSize: currentPageSize,
      };
      if (orderType === undefined) {

        const res = await this.$http.getPendingRefundApp(params);
        if (res.code !== 0) return null;
        this.total = res.data.totalCount;

        return this.list = res.data.list;
      }
      params["orderType"] = orderType;

      const res = await this.$http.getPendingRefundApp(params);
      console.log(`res-->`, res);
      this.list = res.data.list;
      this.total = res.data.totalCount;

    },
    handleSelection (orderList) {
      this.multipleOrder = orderList.map(value => {
        return value.orderNumber;
      });
    },
  },
};
</script>
<style scoped lang="less">

::v-deep .el-pagination {
  margin-top: 1em;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
